<template>
	<view class="sign-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="考勤地点"></uni-navbar></view>
		<view class="container">
			<view>
				<map style="width: 100%; height: calc(100vh - 88rpx)" @markertap="getmarkerId" :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" :circles="circles"></map>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			gridName: {},
			scale: 16,
			latitude: 34.780254,
			longitude: 113.699559,
			marker: [
				{
					id: 0,
					latitude: 34.780254,
					longitude: 113.699559,
					iconPath: '/static/img/mapiconend.png',
					rotate: 0,
					width: 40,
					height: 40
				}
			],
			circles: [
				{
					latitude: 34.780254,
					longitude: 113.699559,
					color: '#4791ff',
					radius: 200,
					strokeWidth: 2,
					fillColor: '#388bff24'
				}
			]
		};
	},
	onLoad(option) {
		if (option && option.zb) {
			let lng = parseFloat(options.zb.split(',')[0]);
			let lat = parseFloat(options.zb.split(',')[1]);
			this.latitude = lat;
			this.longitude = lng;
			this.marker[0].latitude = lat;
			this.marker[0].longitude = lng;
			this.circles[0].latitude = lat;
			this.circles[0].longitude = lng;
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
			} else {
				this.$logout();
			}
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background: #fff;
}
</style>
